<template>
  <div class="progress-com" :style="`height:${height}px;background:${backColor};`">
    <div class="progress-inner" :style="`${color.length>1?'background-image:'+colorText:'background:'+color};width:${progress}%`"></div>
  </div>
</template>

<script>
export default {
  name: "Progress",
  props:{
    height:{
      type:Number,
      default:15,
    },
    progress:{
      type:Number,
      default:0
    },
    backColor:{
      type:String,
      default:'#0a65b6'
    },
    color:{
      type:Array,
      default:()=>['#21dea6','#0e9cde']
    }
  },
  computed:{
    colorText(){
      if(this.color.length===1){
        return this.color[0];
      }
      let text='linear-gradient(to right';
      this.color.map(item=>{
        text+=','+item;
      })
      text=text+')';
      return text;
    }
  }
}
</script>

<style scoped lang="scss">
.progress-com{
  width: 100%;
  border-radius: 20px;
  .progress-inner{
    height: 100%;
    border-radius: 20px;
  }
}
</style>
